<template>
	<view class="driverList">
		<view class="list" v-for="(item, i) in list">
			<view class="avatar"><u-avatar src="./../../static/icon-02.png"></u-avatar></view>
			<view class="info">
				<view>
					<text>{{item.name}}</text>
					<text :class="['mx', item.status == 1 ? 'x' : 'm']">
						{{item.status == 1 ? '闲' : '忙'}}
					</text>
				</view>
				<view class="v2">
					<up-rate :count="5" v-model="item.level" active-color="#2979FF"></up-rate>
				</view>
			</view>
			<view class="phone" @click="handleclick(item.phone)">
				<up-icon name="phone-fill" color="#01AD84" size="20"></up-icon>
			</view>
		</view>
	</view>
</template>

<script setup>
	import http from "@/request/index.js"
	
	const list = ref([]);
	onMounted(() => {
		getDataInfo()
	})
	const getDataInfo = async() => {
		let longitude = getApp().globalData.longitude || ''
		let latitude = getApp().globalData.latitude || ''
		let { code, msg, data } = await http('/app/driver/findAppDriversList', {longitude, latitude}, 'POST')
		if (code != 200) return
		list.value = data
	}
	const handleclick = (phone) => {
		uni.makePhoneCall({
			phoneNumber: phone
		});
	}
</script>

<style lang="scss" scoped>
	.driverList {
		border: 1px soldi red;
		width: 90%;
		margin: 0 auto;
		.list {
			border-bottom: 1px solid #F8F8F8;
			height: 40px;
			padding: 10px 0;
			>view {
				display: inline-block;
			}
			.info {
				margin-left: 10px;
				.mx {
					display: inline-block;
					font-size: 12px;
					background-color: #01AD84;
					color: #fff;
					width: 18px;
					line-height: 18px;
					border-radius: 4px;
					text-align: center;
					margin-left: 10px;
					&.m {
						background-color: #EE2B25;
					}
				}
				.v2 {
					font-size: 12px;
				}
			}
			.phone {
				border: 1px solid #01AD84;
				width: 30px;
				height: 30px;
				line-height: 35px;
				border-radius: 50%;
				text-align: center;
				float: right;
				margin-top: 5px;
				.u-icon {
					display: inline-block;
				}
			}
		}
	}      
</style>
